<template>
	<div class="shop-page-wrapper">
		<image class="bg-image" src="https://rsyl.oss-cn-beijing.aliyuncs.com/22cd4cd2509c4fb6b3330b8bcaac4f05.png"
			mode="aspectFill"></image>
		<scroll-view scroll-y @scrolltolower="reachBottom" class="wrapper">
			<div class="search-wrapper">
				<div class="share" @click="createPost">分享店铺</div>
				<u-search class="search" v-model="keyword" :show-action="false" bg-color="#ffffff" @search="search"
					placeholder="搜索"></u-search>
			</div>
			<div class="store-info">
				<div class="header">
					<image src="/static/icon-phone.png" @click="callStore" class="call-store" mode="aspectFill"></image>
					<div class="photo-wrapper">
						<u-image @click="getStoreLicencePhoto" border-radius="30" width="150" height="150"
							:src="storeInfo.storeLogo || config.logo" mode="aspectFill">
						</u-image>
						<div v-if="STORE===false">
							<u-image @click="whetherCollection" class="icon-save" border-radius="0" width="50"
								height="50" v-if="isCollection" src="/static/icon-saved.png" mode="aspectFill">
							</u-image>
							<u-image @click="whetherCollection" class="icon-save" border-radius="0" width="50"
								height="50" v-esle src="/static/icon-nosave.png" mode="aspectFill">
							</u-image>
						</div>
					</div>
					<div class="info">
						<div class="name">{{ storeInfo.storeName || ''}}</div>
						<div class="num">
							<span class="text">{{storeInfo.score||0}}分</span>
							<span class="line"></span>
							<span class="text">收藏：{{ storeInfo.collectionNum || 0 }}</span>
							<span class="line"></span>
							<span class="text">月销量：{{storeInfo. monthSales||0}}</span>
						</div>
						<div class="juli-kefu" v-if="STORE===false">
							<div class="juli">
								<u-icon name="map" icon="28"></u-icon>
								<div class="text">{{storeInfo.distance|FormatDistance}}</div>
							</div>
							<div>
								<button class="kefu" @click="linkMsgDetail">联系客服</button>
							</div>
						</div>
					</div>
				</div>
				<div class="upload-goods" @click="toUploadGoods" v-if="STORE===true">
					<button class="button">上传商品</button>
				</div>
				<div class="body">
					<div class="item">
						<u-icon class="icon" color="#8d8d8d" name="clock" icon="36"></u-icon>
						<div class="text">营业时间：{{ storeInfo.sellTimeSta || '暂无'  }} -
							{{ storeInfo.sellTimeEnd || '暂无' }}
						</div>
					</div>
					<div class="item" @click="navigation">
						<u-icon class="icon" color="#8d8d8d" name="home" icon="36"></u-icon>
						<div class="site">
							<div class="text">地址：{{ storeInfo.storeAddressDetail || '暂无' }}</div>
							<image class="image" src="/static/go.png" mode=""></image>
						</div>
					</div>
					<div class="item">
						<u-icon class="icon" color="#8d8d8d" name="share" icon="36"></u-icon>
						<div class="text">经营范围：{{storeInfo.scope||'暂无'}}
						</div>
					</div>
				</div>
				<div class="store-image">
					<image class="image" @click="perview(item)" :src="item" mode="aspectFill"
						v-for="(item,index) in storeInfo.storeImage" :key="item"></image>
				</div>
			</div>
			<!-- tab -->
			<div class="tabs-wrapper">
				<u-tabs :list="tabs" :active-color="mainColor" :is-scroll="false" :current="current"
					@change="changeTab">
				</u-tabs>
			</div>
			<!-- menu -->
			<!-- 商品 -->
			<div v-if="current == 0">
				<view class="nodata" v-if="goodsList===''">
					<u-loading mode="circle" size="28"></u-loading> 加载中……
				</view>
				<view class="nodata" v-else-if="goodsList.length===0">
					<image src="@/static/nodata.png" mode="widthFix"></image>
					<p>暂无数据!</p>
				</view>
				<div v-else class="contant">
					<view class="item" v-for="(item,index) in goodsList" :key="index"
						@click="navigateToGoodsDetail(item)">
						<u-image width="100%" height="330rpx" mode="aspectFill" :src="item.thumbnail">
							<u-loading slot="loading"></u-loading>
						</u-image>
						<div class="name wes-2">{{ item.goodsName }}</div>
						<view class="buyCount">
							<div class="score">{{item.score||0}}分</div>
							<div class="sale-num">月售 {{ item.monthSales|| "0" }}+</div>
						</view>
						<div class="price">
							{{item.memberPrice| unitPrice}}
						</div>
					</view>
				</div>
			</div>
			<!-- 全部分类 -->
			<div class="category" v-if="current == 1">
				<div class="category-item" v-for="(item,index) in categoryList" :key="index">
					<div class="flex" @click="getCategoryGoodsList(item)">
						<div>{{item.labelName}}</div>
						<div>
							<u-icon color="#aaaaaa" name="arrow-right"></u-icon>
						</div>
					</div>
					<!-- 分类子级 -->
					<div class="child-list" v-if="item.children && item.children.length!=0">
						<div class="child" @click="getCategoryGoodsList(child)" v-for="(child,i) in item.children">
							{{child.labelName}}
						</div>
					</div>
				</div>
			</div>
			<!-- 商家订单 -->
			<div class="category order-wrapper" v-if="current == 2">
				<div class="select-type-wrapper">
					<div class="selected-option" @click.stop="selectListHide=!selectListHide">
						{{selectList[selectCurrent].name}}
						<u-icon name="arrow-right" color="#dfdfdf"></u-icon>
					</div>
					<div class="select-input">
						<input class="input" type="text" placeholder="请输入" v-model="selectInput">
					</div>
					<button class="button" @click.stop="getStoreOrderList">搜索</button>
					<div class="select-list" :class="{'hide':selectListHide}">
						<div class="select-item" @click.stop="selectType(index)" :key="item.name"
							:class="{'selected':selectCurrent===index}" v-for="(item,index) in selectList">
							{{item.name}}
						</div>
					</div>
				</div>
				<view class="nodata" v-if="orderList===''">
					<u-loading mode="circle" size="28"></u-loading> 加载中……
				</view>
				<view class="nodata" v-else-if="orderList.length===0">
					<image src="@/static/nodata.png" mode="widthFix"></image>
					<p>暂无数据!</p>
				</view>
				<div v-else class="list-wrapper">
					<div class="item-wrapper" v-for="(item) in orderList" :key="item.sn">
						<div class="title">
							<div class="order-number">
								<div>订单号：</div>
								<div>{{item.sn||''}}</div>
							</div>
							<div class="time">
								<div class="state">
									<span v-if="item.orderStatus==='UNPAID'">未付款</span>
									<span v-if="item.orderStatus==='PAID'">已付款</span>
									<span v-if="item.orderStatus==='UNDELIVERED'">待发货</span>
									<span v-if="item.orderStatus==='DELIVERED'">已发货</span>
									<span v-if="item.orderStatus==='COMPLETED'">已完成</span>
									<span v-if="item.orderStatus==='TAKE'">待核验</span>
									<span v-if="item.orderStatus==='CANCELLED'">已取消</span>
									<span v-if="item.orderStatus==='AFTERSALEING'">售后中</span>
									<span v-if="item.orderStatus==='AFTERSALEFINISHED'">售后完成</span>
								</div>
								<div>{{item.createTime}}</div>
							</div>
						</div>
						<div class="goods-info" v-for="(goodsitem,index) in item.orderItems" :key="index">
							<div class="image-wrapper">
								<image class="image" :src="goodsitem.image" mode="aspectFill"></image>
							</div>
							<div class="detail">
								<div class="name">
									{{goodsitem.name}}
								</div>
								<div class="price money-format">
									<span class="logo"></span>
									<span class="zheng">{{goodsitem.goodsPrice|formatPrice(0)}}</span>
									<span class="dian">.</span>
									<span class="xiao">{{goodsitem.goodsPrice|formatPrice(1)}}</span>
								</div>
							</div>
							<div class="number">
								<div class="span">
									x{{goodsitem.num}}
								</div>
							</div>
						</div>
						<div class="tail">
							<div class="money money-format">
								<span class="text">实付金额</span>
								<span class="logo"></span>
								<span class="zheng">{{item.storePrice|formatPrice(0)}}</span>
								<span class="dian">.</span>
								<span class="xiao">{{item.storePrice|formatPrice(1)}}</span>
							</div>
						</div>
						<div class="take" v-if="item.orderType==='VIRTUAL'">
							<div class="text">核销码：{{item.verificationCode||''}}</div>
							<button class="button" v-if="item.orderStatus==='TAKE'" @click="orderTake(item)">核销</button>
						</div>
					</div>
				</div>
			</div>
		</scroll-view>
		<div class="post-wrapper" v-if="postShow" @click="postShow=false">
			<div class="post-inner-wrapper" @click.stop>
				<div class="title">生成你的专属海报</div>
				<!-- #ifdef MP-WEIXIN -->
				<canvas id="canvas" type="2d" />
				<!-- #endif -->
				<!-- #ifndef MP-WEIXIN -->
				<canvas canvas-id="canvas" id="canvas" />
				<!-- #endif -->
				<button class="button-add-next" @click="savePost">保存</button>
				<div class="tip">将店铺分享给好友吧</div>
			</div>
		</div>
	</div>
</template>

<script>
	import {
		getStoreBaseInfo,
		getStoreCategory,
		browseStoreSpoor
	} from "@/api/store.js";
	import {
		SunCode,
		getGoodsList
	} from "@/api/goods.js";
	import {
		deleteStoreCollection,
		collectionGoods,
		getGoodsIsCollect,
	} from "@/api/members.js";
	import {
		StoreOrderList,
		StoreOrderTake
	} from '@/api/business.js'
	import config from "@/config/config";
	import * as API_Members from "@/api/members.js";
	import storage from "@/utils/storage";
	import DrawPoster from "@/js_sdk/u-draw-poster";
	let WebIM = require("@/utils/WebIM")["default"];
	let disp = require("@/utils/broadcast");
	export default {
		data() {
			return {
				postShow: false,
				STORE: '', // 进去的店铺是否是自己的店铺
				config,
				mainColor: this.$mainColor, //主色调
				current: 0, //初始tabs的索引
				tabs: [{
					name: "全部商品"
				}, {
					name: "分类查看"
				}], // 标签
				storeId: "",
				keyword: "",
				storeInfo: {}, //店铺详情
				isCollection: false, //是否收藏
				goodsList: [], //推荐货物
				// 店铺订单 --start--
				selectList: [{
						name: '订单号',
						type: 'orderSn'
					},
					{
						name: '核销码',
						type: 'verificationCode'
					},
					{
						name: '商品名',
						type: 'groupName'
					}
				],
				selectCurrent: 0,
				selectListHide: true,
				selectInput: '',
				orderList: '', // 商家订单列表
				// 店铺订单 --end--
				categoryList: [],
				couponParams: {
					pageNumber: 1,
					pageSize: 50,
					storeId: ""
				},
				goodsParams: {
					pageNumber: 1,
					pageSize: 50,
					storeId: ""
				},
			};
		},
		watch: {
			current(val) {
				if (val === 0) {
					this.goodsParams.pageNumber = 1;
					this.goodsList = [];
					this.getGoodsData()
				}
				if (val === 1) {
					this.getCategoryData();
				}
				if (val === 2) {
					this.getStoreOrderList();
				}
			},
		},

		/**
		 * 加载
		 */
		onLoad(options) {
			this.id = options.id
			this.storeId = options.id;
			this.goodsParams.storeId = options.id;
			this.couponParams.storeId = options.id;
		},
		onPullDownRefresh() {
			this.init();
		},
		mounted() {
			// #ifdef MP-WEIXIN
			// 小程序默认分享
			uni.showShareMenu({
				withShareTicket: true
			});
			// #endif

			this.init();
		},
		onShareAppMessage(res) {
			console.log({
				...this.share(),
				title: `[好友推荐]${this.storeInfo.storeName}`,
				imageUrl: this.storeInfo.storeLogo,
			})
			return {
				...this.share(),
				title: `[好友推荐]${this.storeInfo.storeName}`,
				imageUrl: this.storeInfo.storeLogo,
			};
		},
		onShareTimeline(res) {
			return {
				...this.share(),
				title: `[好友推荐]${this.storeInfo.storeName}`,
				imageUrl: this.storeInfo.storeLogo,
			};
		},
		onShow() {
			// 判断是否非登录 登录之后当前登录人storeId和当前Id对比
			this.login = this.$options.filters.isLogin("auth")
			if (this.login) {
				this.userInfo = storage.getUserInfo();
				// console.log(this.userInfo)
				this.haveStore = storage.getUserInfo().haveStore
				if (this.haveStore && this.storeId === this.userInfo.storeId) {
					this.STORE = true
					this.tabs = [{
						name: "全部商品"
					}, {
						name: "分类查看"
					}, {
						name: '店铺订单'
					}]
				} else {
					this.STORE = false
				}
			} else {
				this.STORE = false
			}
			// 监听环信登录失败
			disp.on("em.error.passwordErr", () => {
				this.register(that.userInfo)
			});
		},
		methods: {
			linkMsgDetail() {
				if (this.$options.filters.isLogin('auth')) {
					this.userInfo = storage.getUserInfo()
					console.log(this.storeInfo, "店铺信息是。。。")
					API_Members.getUserInfoById({
						storeIds: this.storeInfo.storeId
					}).then(res => {
						if (res.data.success && res.data.result && res.data.result.length > 0) {
							this.into_singleChatRoom(res.data.result[0])
						}
					})
				} else {
					this.$options.filters.navigateToLogin()
				}

			},
			// 单聊
			into_singleChatRoom: function(storeInfo) {

				var my = uni.getStorageSync("myUsername");
				this.register({
					id: storeInfo.id,
					nickName: storeInfo.storeName
				})
				this.register({
					id: this.userInfo.id,
					nickName: this.userInfo.nickName
				}, 1)
				if (!my) {
					my = this.userInfo.id
					uni.setStorage({
						key: "myUsername",
						data: this.userInfo.id
					});
					this.loginHX()
				}
				var nameList = {
					myName: my,
					your: storeInfo.id,
					nickName: storeInfo.storeName
				};
				console.log(nameList, "打开对话窗口")
				uni.navigateTo({
					url: "../chatroom/chatroom?username=" + JSON.stringify(nameList),
				});
			},
			loginHX() {
				console.log(this.userInfo, "开始登录")
				uni.WebIM.conn.open({
					apiUrl: WebIM.config.apiURL,
					user: this.userInfo.id,
					pwd: this.userInfo.id,
					grant_type: "password",
					appKey: WebIM.config.appkey
				});
			},
			register: function(userInfo, type) {
				const that = this;

				var options = {
					apiUrl: WebIM.config.apiURL,
					username: userInfo.id,
					password: userInfo.id,
					nickname: userInfo.nickName,
					appKey: WebIM.config.appkey,
					success: function(res) {
						if (type && type === 1) {
							this.loginHX()
						}
					},
					error: function(res) {
						// if (res.statusCode !== "200") {
						// 	if (res.statusCode == '400' && res.data.error == 'illegal_argument') {
						// 		return uni.showToast({
						// 			title: "用户名非法",
						// 			icon: 'none'
						// 		});
						// 	}

						// 	// uni.showToast({
						// 	// 	title: "用户名已被占用",
						// 	// 	icon: 'none'
						// 	// });
						// }
					}
				};
				WebIM.conn.registerUser(options);
			},
			share() {
				return {
					path: `/pages/product/shopPage?id=${this.storeId}`,
				};
			},
			// 导航到目的地
			navigation() {
				if (!this.storeInfo.lat || !this.storeInfo.lon || this.storeInfo.lat === 'null' || this.storeInfo.lon ===
					'null') {
					uni.showToast({
						title: "该商家未提供准确定位信息",
						icon: "none"
					})
					return
				}
				uni.navigateTo({
					url: "/pages/product/nav/nav?id=" + this.id
				})
			},
			// 下拉加载
			reachBottom() {
				this.goodsParams.pageNumber++;
				this.getGoodsData();
			},
			/**
			 * 跳转到上传商品页面
			 * */
			toUploadGoods() {
				uni.navigateTo({
					url: "/pages/business/upload-goods/upload-goods"
				})
			},
			/**
			 * 去查看营业执照
			 * */
			getStoreLicencePhoto() {
				uni.navigateTo({
					url: `/pages/product/licencePhoto?id=${this.storeId}`,
				});
			},
			/**
			 * 初始化信息
			 */
			init(id) {
				this.goodsList = [];
				this.categoryList = [];
				this.goodsParams.pageNumber = 1;
				if (this.$options.filters.isLogin("auth")) {
					this.enableGoodsIsCollect();
				}
				// 店铺信息
				this.getStoreData();
				// 商品信息
				this.getGoodsData();
				// 店铺分类
				this.getCategoryData();
			},
			/**
			 * 给商家打电话
			 * */
			callStore() {
				if (this.storeInfo && this.storeInfo.storePhone) {
					uni.makePhoneCall({
						phoneNumber: this.storeInfo.storePhone
					})
				} else {
					uni.showToast({
						title: '商家没有预留电话，请通过其它途径联系商家',
						icon: 'none',
						duration: 3000

					})
				}
			},
			/**
			 * 联系客服
			 */
			linkKefuDetail() {
				uni.makePhoneCall({
					phoneNumber: this.storeInfo.linkPhone,
				});
			},

			/** 获取店铺分类 */
			async getCategoryData() {
				let res = await getStoreCategory(this.storeId);
				if (res.data.success) {
					this.categoryList = res.data.result;
				}
			},
			/**是否收藏店铺 */
			async enableGoodsIsCollect() {
				let res = await getGoodsIsCollect("STORE", this.storeId);
				if (res.data.success) {
					this.isCollection = res.data.result;
				}
			},

			/**商品分类中商品集合 */
			getCategoryGoodsList(val) {
				uni.navigateTo({
					url: `/pages/product/shopPageGoods?title=${val.labelName}&id=${val.id}&storeId=${this.storeId}`,
				});
			},

			/**
			 * 搜索
			 */
			search() {
				uni.navigateTo({
					url: `/pages/search/goods?storeId=${this.storeId}&keyword=${this.keyword}`,
				});
			},

			/** 点击tab */
			changeTab(index) {
				this.current = index;
			},

			/**
			 * 店铺信息
			 */
			async getStoreData() {
				if (storage.getAccessToken()) {
					browseStoreSpoor(this.storeId)
				}
				let res = await getStoreBaseInfo(this.storeId);
				if (res.data.success) {
					let result = res.data.result
					if (result.storeImage) {
						result.storeImage = result.storeImage.split(',')
					} else {
						result.storeImage = []
					}
					if (result.goodsManagementCategoryName) {
						result.goodsManagementCategoryName = result.goodsManagementCategoryName.split(',').join(' ')
					}
					this.storeInfo = result
				} else {
					uni.reLaunch({
						url: "/"
					});
				}
			},

			/** 加载商品 */
			async getGoodsData() {
				let res = await getGoodsList(this.goodsParams);
				if (res.data.success) {
					this.goodsList.push(...res.data.result.records);
				}
			},
			// 店铺订单
			getStoreOrderList() {
				let params = {
					storeId: this.storeId
				}
				params[this.selectList[this.selectCurrent].type] = this.selectInput
				StoreOrderList(params).then((res) => {
					this.orderList = res.data.result.records
				})
			},
			orderTake(item) {
				let that = this
				uni.showModal({
					content: '确定核销该订单吗？',
					success(res) {
						if (res.confirm) {
							StoreOrderTake(item.sn, item.verificationCode).then((res) => {
								that.getStoreOrderList()
								uni.showToast({
									title: '核销成功',
									icon: 'none'
								})
							})
							console.log('用户点击确定');
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				})

			},
			// 选择筛选条件
			selectType(index) {
				this.selectCurrent = index
				this.selectListHide = true
			},
			/**
			 * 跳转到商品详情
			 */
			navigateToGoodsDetail(val) {
				uni.navigateTo({
					url: `/pages/product/goods?id=${val.skuList[0].id}&goodsId=${val.id}`,
				});
			},

			/**
			 *  是否收藏
			 */
			whetherCollection() {
				if (this.isCollection) {
					deleteStoreCollection(this.storeId).then((res) => {
						if (res.data.success) {
							this.isCollection = false;
							uni.showToast({
								icon: "none",
								duration: 3000,
								title: "取消收藏成功！",
							});
						}
					});
				} else {
					collectionGoods("STORE", this.storeId).then((res) => {
						if (res.data.success) {
							this.isCollection = true;
							uni.showToast({
								icon: "none",
								duration: 3000,
								title: "收藏成功！",
							});
						}
					});
				}
			},
			createPost() {
				if (this.$options.filters.isLogin("auth")) {
					this.postShow = true
					setTimeout(() => {
						this.drawPoster()
					}, 20)
				} else {
					this.$options.filters.forceLogin()
				}
			},
			//绘制海报
			async drawPoster() {
				let sunCode = await SunCode(`/pages/product/shopPage?id=${this.storeId}`)
				console.log(sunCode)
				const {
					width,
					height,
				} = {
					width: 320,
					height: 420,
				};
				const dp = await DrawPoster.build("canvas")
				dp.canvas.width = width
				dp.canvas.height = height
				dp.draw((ctx) => {
					ctx.fillStyle = "#ffffff";
					ctx.fillRect(0, 0, width, height);
				});
				dp.draw(async (ctx) => {
					await ctx.drawImageFit(this.storeInfo.storeLogo, {
						round: 8,
						objectFit: 'cover',
						specifiedSize: {
							width: 280,
							height: 280
						},
						intrinsicPosition: ['center', 'center'],
						specifiedPosition: [20, 20],
					})
				});
				dp.draw((ctx) => {
					let name = ''
					if (this.storeInfo.storeName.length > 14) {
						name = this.storeInfo.storeName.slice(0, 12) + '...'
					} else {
						name = this.storeInfo.storeName
					}
					ctx.font = '14px Arial'
					ctx.fillText(name, 20, 360)
				});
				dp.draw(async (ctx) => {
					await Promise.all([
						ctx.drawImage(
							`data:image/png;base64,${sunCode.data.result.sunCode}`,
							200,
							320,
							100,
							100,
						)
					]);
				});
				const result = await dp.awaitCreate();
				this.posterImgUrl = await dp.createImagePath();
				console.log("绘制生成本地地址:", this.posterImgUrl);
			},
			savePost() {
				uni.saveImageToPhotosAlbum({
					filePath: this.posterImgUrl,
					success() {
						uni.showToast({
							title: '保存成功',
							icon: 'none'
						})
					},
					fail() {
						uni.showToast({
							title: '保存失败',
							icon: 'none'
						})
					}
				})
			},
			/**
			 * 店铺商品预览
			 * */
			perview(item) {
				uni.previewImage({
					current: item,
					urls: this.storeInfo.storeImage
				})
			},
		},
	};
</script>

<style lang="scss" scoped>
	.post-wrapper {
		z-index: 999;
		position: fixed;
		width: 100vw;
		height: 100vh;
		top: 0;
		left: 0;
		background-color: rgba(0, 0, 0, 0.1);

		.post-inner-wrapper {
			background-color: #ffffff;
			position: absolute;
			width: 320px;
			display: flex;
			flex-direction: column;
			align-items: center;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);

		}

		.title {
			margin-top: 24upx;
			margin-bottom: 24upx;
			font-size: 32upx;
		}

		.button-add-next {
			margin-top: 32upx;
			width: 560upx;
			height: 80upx;
			line-height: 76upx;
			background: linear-gradient(162.65deg, rgba(255, 98, 0, 1) 0%, rgba(240, 139, 67, 0.65) 100%);
			color: #ffffff;
			font-size: 28upx;
			border-radius: 80upx;
		}

		.tip {
			padding: 24upx 0 32upx 0;
			color: #828282;
			font-size: 24upx;
		}

		#canvas {
			width: 320px;
			height: 440px;
		}
	}

	.shop-page-wrapper {
		.bg-image {
			position: absolute;
			display: flex;
			top: 0;
			width: 100vw;
			height: 700upx;
		}

		.search-wrapper {
			display: flex;
			align-items: center;

			.share {
				padding-right: 16upx;
				margin-right: 16upx;
				color: #ffffff;
			}

			.search {
				flex: 1;
			}
		}

		.wrapper {
			height: 100vh;
			padding: 24upx;
			position: relative;
			z-index: 10;
			box-sizing: border-box;

			.store-info {
				position: relative;
				margin-top: 240upx;
				margin-bottom: 24upx;
				padding: 24upx;
				background-color: #ffffff;
				border-radius: 16upx;

				.call-store {
					position: absolute;
					top: 32upx;
					right: 32upx;
					width: 60upx;
					height: 60upx;
				}

				.header {
					margin-top: 12upx;
					display: flex;
					align-items: center;

					.photo-wrapper {
						position: relative;
						flex: 0 0 150upx;
						width: 150upx;
						height: 150upx;
						margin-right: 32upx;
						height: 170upx;

						.icon-save {
							position: absolute;
							right: -20upx;
							bottom: 0upx;
						}
					}

					.info {
						flex: 1;

						.name {
							font-size: 36upx;
							width: 400upx;
							word-wrap: break-word;
						}

						.num {
							margin-top: 12upx;
							height: 40upx;
							display: flex;
							justify-content: space-between;
							align-items: center;
							color: rgba(141, 141, 141, 1);
							font-size: 28upx;

							.line {
								width: 2upx;
								height: 28upx;
								background-color: rgba(141, 141, 141, 1);
							}
						}

						.juli-kefu {
							margin-top: 12upx;
							display: flex;
							justify-content: space-between;
							align-items: center;

							.juli {
								display: flex;
								align-items: center;

								.text {
									font-size: 28upx;
									color: rgba(23, 23, 23, 1);
								}
							}

							.kefu {
								width: 180upx;
								height: 60upx;
								line-height: 60upx;
								background: linear-gradient(270deg, rgba(237, 217, 104, 1) 0%, rgba(255, 53, 18, 1) 100%);
								border-radius: 15px;
								color: #ffffff;
								font-size: 26upx;
							}
						}

					}
				}

				.upload-goods {
					display: flex;
					justify-content: center;
					margin: 16upx 0;

					.button {
						width: 240upx;
						height: 80upx;
						line-height: 80upx;
						background: linear-gradient(270deg, rgba(118, 194, 245, 1) 0%, rgba(18, 125, 255, 1) 100%);
						border-radius: 40upx;
						font-size: 32upx;
						color: #ffffff;
					}
				}

				.body {
					.item {
						display: flex;
						align-items: center;
						margin-top: 16upx;
						color: #8d8d8d;
						font-size: 28upx;

						.site {
							display: flex;
							align-items: center;
							justify-content: space-between;

							.text {
								width: 460upx;
								overflow:hidden;//将超出的部分隐藏
								text-overflow:ellipsis;//超出部分用省略号显示
								display:-webkit-box;
								-webkit-box-orient:vertical;
								-webkit-line-clamp:2;
							}

							.image {
								margin-left: 10upx;
								width: 130upx;
								height: 46upx;
							}
						}

						.icon {
							margin-right: 16upx;
						}
					}
				}

				.store-image {
					display: flex;
					flex-wrap: wrap;

					.image {
						margin: 8upx;
						flex: 0 0 196upx;
						width: 196upx;
						height: 196upx;
						border-radius: 16upx;
					}

				}
			}

			.tabs-wrapper {
				border-radius: 16upx;
				overflow: hidden;
			}

			.contant {
				margin-top: 20rpx;
				display: flex;
				flex-wrap: wrap;
				justify-content: space-between;

				>.empty {
					width: 100%;
					display: flex;
					justify-content: center;
					margin-top: 40rpx;
				}

				.item {
					background: #fff;
					width: 49%;
					font-size: 26rpx;
					display: flex;
					flex-direction: column;
					border: 1px solid #f8f8f8;
					margin-bottom: 20rpx;
					border-radius: 16upx;
					overflow: hidden;
					padding-bottom: 24upx;

					.name {
						text-align: left !important;
						color: #333;
						padding: 0 20rpx;
						margin-top: 20rpx;
						overflow: hidden;
					}

					.price {
						font-weight: 500;
						color: $main-color;
						font-size: 32rpx;
						padding: 0 20rpx;
						margin-top: 20rpx;
						white-space: nowrap;
					}

					.buyCount {
						margin-top: 24upx;
						display: flex;
						padding: 0 20rpx;
						font-size: 24upx;
						justify-content: space-between;
						align-items: center;
						color: #999;

						.score {
							color: #ff8921;
							font-size: 26upx;
						}

						.sale-num {
							color: #adaaaa;
							font-size: 20upx;
						}
					}
				}
			}

			.category {
				background-color: #ffffff;
				border-radius: 16upx;

				.category-item {
					background: #fff;
					padding: 22rpx;
					margin: 20rpx 10rpx;

					>.flex {
						color: #666;
						justify-content: space-between;
					}

					>.child-list {
						display: flex;
						margin: 20rpx 0;
						flex-wrap: wrap;

						>.child {
							justify-content: center;
							margin: 1% 0;
							display: flex;
							width: 48%;
							font-size: 24rpx;
							color: #999;
							margin-right: 1%;
							border: 1rpx solid #ededed;
							box-sizing: border-box;
							height: 70rpx;
							text-align: center;
							line-height: 70rpx;
						}
					}
				}
			}

			.nodata {
				text-align: center;
				padding: 100upx;
			}

			.nodata {
				display: flex;
				align-items: center;
				justify-content: center;
				flex-direction: column;

				image {
					width: 300rpx;
					height: 400rpx;
				}

				p {
					color: #666;
					margin-top: 50rpx;
					font-size: 32rpx;
					letter-spacing: 6rpx;
				}
			}

			.order-wrapper {
				.button {
					width: 120upx;
					height: 64upx;
					line-height: 64upx;
					color: #ffffff;
					text-align: center;
					font-size: 26upx;
					background: linear-gradient(162.65deg, rgba(255, 98, 0, 1) 0%, rgba(240, 139, 67, 0.65) 100%);
				}

				.select-type-wrapper {
					margin-top: 24upx;
					padding: 32upx;
					position: relative;
					display: flex;
					justify-content: space-between;
					align-items: center;

					.selected-option {
						display: flex;
						justify-content: space-around;
						align-items: center;
						width: 200upx;
						height: 64upx;
						border: 2upx solid #dddddd;
						border-radius: 8upx;
						background-color: #ffffff;
						color: rgba(156, 156, 156, 1);
					}

					.select-input {
						margin-left: 12upx;
						padding: 0 12upx;
						flex: 1;
						border: 2upx solid #f1f1f1;
						height: 64upx;

						.input {
							height: 56upx;
						}
					}

					.select-list {
						position: absolute;
						top: 94upx;
						left: 32upx;
						width: 200upx;
						// height: 200upx;
						display: flex;
						flex-direction: column;
						justify-content: space-around;
						text-align: center;
						background-color: #ffffff;
						border: 2upx solid #dddddd;
						overflow: hidden;
						box-sizing: border-box;
						opacity: 1;
						transition: height 0.3s;

						&.hide {
							height: 0;
							opacity: 0;
						}

						.select-item {
							height: 60upx;
							line-height: 60upx;
							width: 200upx;

							&.selected {
								color: rgb(0, 162, 255);
							}
						}
					}
				}

				.list-wrapper {
					.item-wrapper {
						margin-top: 16upx;
						padding: 24upx;
						border-radius: 8upx;
						background-color: #fff;

						.title {
							display: flex;
							justify-content: space-between;
							font-size: 24upx;
							margin-bottom: 12upx;

							.time {
								text-align: right;
								color: #999999;
								white-space: nowrap;

								.state {
									color: $main-color;
									font-size: 28upx;
									font-weight: bold;
								}
							}
						}

						.goods-info {
							display: flex;
							width: 100%;

							.image-wrapper {
								flex: 0 0 144upx;
								display: flex;
								align-items: center;

								.image {
									width: 120upx;
									height: 120upx;
									border-radius: 8upx;
									border: 6upx;
								}
							}

							.detail {
								flex: 1;
								display: flex;
								flex-direction: column;
								justify-content: center;
								overflow: hidden;

								.name {
									width: 100%;
									overflow: hidden;
									white-space: nowrap;
									text-overflow: ellipsis;
									font-size: 26upx;
								}

								.price {
									margin-top: 16upx;
									color: $main-color;
								}
							}

							.number {
								flex: 0 0 80upx;
								display: flex;
								justify-content: flex-end;
								align-items: center;
								color: #999999;
								font-size: 24upx;
							}
						}

						.tail {
							margin-top: 12upx;
							display: flex;
							justify-content: space-between;
							height: 60upx;

							.money {
								margin-top: 24upx;
							}

							.operate {
								padding-top: 12upx;

								.deliver {
									height: 48upx;
									line-height: 48upx;
									width: 100upx;
									text-align: center;
									border-radius: 48upx;
									border: 2upx solid $main-color;
									color: $main-color;
									font-size: 24upx;
								}
							}
						}

						.take {
							margin-top: 24upx;
							display: flex;
							height: 80upx;
							align-items: center;
							border-top: 2upx solid #f1f1f1;

							.text {
								flex: 1;
							}
						}
					}
				}
			}
		}
	}
</style>
